<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>ECharts实例</title>
<!-- 引入echarts.js-->
<script src="js/echarts.js"></script>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<!-- 导入主题js文件 -->
<script type="text/javascript" src="theme/infographic.js"></script>
<script type="text/javascript" src="theme/vintage.js"></script>
<script type="text/javascript" src="theme/green.js"></script>
<script type="text/javascript" src="theme/blue.js"></script>
<script type="text/javascript" src="theme/gray.js"></script>
<script type="text/javascript" src="theme/mint.js"></script>
<script type="text/javascript" src="theme/sakura.js"></script>
<script type="text/javascript" src="theme/macarons2.js"></script>
<script type="text/javascript">
	function getChartData() {
		//通过Ajax获取数据  
		$.ajax({
			type : "post",
			async : false, //同步执行  
			url : "SalesAnal/getPieData",
			data : {'salesMonthAnalId':1},
			dataType : "json", //返回数据形式为json  
			success : function(result) {
				if (result) {
					
					option.legend.data = result.legend;
					option.series[0].data = result.series;
				
					myChart.hideLoading();
					myChart.setOption(option);//更新图表
				}
			},
			error : function(errorMsg) {
				alert("不好意思，图表请求数据失败啦!");
				myChart.hideLoading();
			}
		});
	}
</script>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="mainPie"
		style="height:500px;border:1px solid #ccc;padding:10px;"></div>
	<script type="text/javascript">
		var dom = document.getElementById("mainPie");
		
		var myChart = echarts.init(dom);//可传入第二个参数设置主图
		
		var app = {};
        //全局变量 option, json对象
		var option = {
			title : {
				text : '某站点用户访问来源',
				subtext : '纯属虚构',
				x : 'center'
			},
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c} ({d}%)"
			},
			legend : {
				orient : 'vertical',
				x : 'left',
				data : [/* '直接访问','邮件营销','联盟广告','视频广告','搜索引擎' */]
			},
			toolbox : {
				show : true,
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			series : [ {
				name : '访问来源',
				type : 'pie',
				radius : '55%',
				center : [ '50%', '60%' ],
				data : [
				/* {value:335, name:'直接访问'}, 
				 {value:310, name:'邮件营销'},
				{value:234, name:'联盟广告'},
				{value:135, name:'视频广告'},
				{value:1548, name:'搜索引擎'} */
				],
				itemStyle : {
					emphasis : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					}
				}
			} ]
		};

		// 为echarts对象加载数据 
		myChart.setOption(option);
		myChart.hideLoading();
		getChartData();//aja后台交互    
		// alert("===");
	</script>



</body>
</html>
